<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<!--导航条-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <img class="navbar-brand" src="img/logo-removebg-preview.png" class="logo">
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">精选<span class="sr-only">(current)</span></a></li>
                <li><a href="views/hot.html">热门</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">分类 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left" id="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="views/register.html">注册</a></li>
                <li><a href="views/login.html">登录</a></li>

            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--博客内容-->
<div class="container main">
    <div class="blog">
        <div class="title"><a href="views/detail2.html"><h3>SNH48GROUP《丝路》MV上线XR技术呈现新国潮西域奇景</h3></a></div>
        <div class="description">
            <dl>
                <dt>标签： 娱乐</dt>
            </dl>
        </div>
        <div class="content">
            <p>2022年11月15日，由SNH48沈梦瑶、SNH48段艺璇、SNH48袁一琦领衔演绎的《丝路》MV正式上线。这也是丝芭传媒转型为面向WEB3.0和XR互联网时代的沉浸式互动社交元宇宙——美踏元宇宙后，利用XR等前沿制作技术打造的首支重磅MV，呈现了恢弘瑰丽的新国潮西域视觉奇景。</p>

        </div>
    </div>
    <div class="blog">
        <div class="title"><h3><a href="views/detail1.html">佛门&nbsp;</a><small><a>文/那迁</a></small></h3></div>
        <div class="description">
            <dl>
                <dd>标签： 情感,禅意</dd>
                <dd>分类： 诗歌</dd>
            </dl>
        </div>
        <div class="content">
            <p>晚风在深山喋喋念经
                诸峰禅定

                远海的涛声宛若白色的莲花，渐渐稀落。落叶走在皈依的路上
                黄花残

                莫邪山一日一日修行
                晚霞横纵

                迁移的鹭鸟
                往而复返

                我亲爱的小镇啊
                ...
            </p>

        </div>
    </div>
    <div class="blog">
        <div class="title"><h3>h3.  heading <small>Secondary text</small></h3></div>
        <div class="description">
            <dl>
                <dt>...</dt>
                <dd>...</dd>
            </dl>
        </div>
        <div class="content">
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

                Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit....</p>

        </div>
    </div>
    <div class="blog">
        <div class="title"><h3>h3.  heading <small>Secondary text</small></h3></div>
        <div class="description">
            <dl>
                <dt>...</dt>
                <dd>...</dd>
            </dl>
        </div>
        <div class="content">
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

                Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit....</p>

        </div>
    </div>
</div>
<!--footer-->
<footer class="container-fluid footer" style="margin-bottom: 0px">
    <div class="row company text-center" >
        XXXX股份有限公司 版权所有Copyright 2022-2022, All Rights Reserved 苏ICP备XXXXXXX
    </div>

</footer>
<style>
    a{
        text-decoration: none;
    }

    .main{
        margin-top: 50px;
    }


    .logo {
        height: 100%;
        width: 100%;
        margin-top: 5px;
    }

    #search {
        position: relative;
        left: 100px;
    }

    .blog {
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin-top: 20px;
    }

    .title{
        padding-top: 5px;
        padding-left: 50px;
    }

    .description{
        padding-top: 5px;
        padding-left: 50px;
    }

    .content{
        padding-top: 5px;
        padding-left: 50px;
        padding-bottom: 10px;
    }

    .footer{
        margin-top: 50px;
    }

</style>
</body>
</html>
